<template>
	<view class="mine-page page">
		<loading v-if="showLoading"></loading>
		<scroll-view :scroll-y="true" @scroll="scrollChange" class="content">
			<CustomNav :active="{ textColor: '#fff', background: 'transparent' }" title="我的" :is-back="false">
			</CustomNav>
			<view class="top-block" :class="member==1&state==1?'active':''">
				<view class="user-item" :class="member==1?'active':''">
					<view class="user-photo-block" v-if="user.phone">
						<button class="upload-photo-btn" open-type="chooseAvatar" @chooseavatar="changeAvatar"
							hover-class="none">
							<view class="tips">点击编辑</view>
							<image :src="cloudStorage+user.faceUrl" class="user-photo ps"></image>
						</button>
					</view>
					<button v-else class="btn-login" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">

						<image
							src="https://jinchang-job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/job_hunting/index/Mr.jpg"
							class="user-photo">

						</image>
					</button>

					<view class="phone" v-if="user.phone">{{user.name}}
						<view class="yard" v-if="member==1">
							<view class="yard-left" @click="navigate('/page_other/code/index')">
								邀请码：{{code}}
							</view>
							<view class="yard-rght" @click="copyMessage(code)">
								<view class="copy">复制</view>
								<image
									src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/copy.png"
									mode=""></image>
							</view>
						</view>
					</view>
					<button class="user-name" hover-class="none" open-type="getPhoneNumber" v-else
						@getphonenumber="getPhoneNumber">立即登录</button>
				</view>
				<view class="right-item" :class="member==1?'active':''">
					<view class="item" v-if="member==1" style="margin-right: 30rpx;margin-top:10rpx;">
						<image style="width: 40rpx;height: 40rpx;" @click="navigate('/page_other/code/index')"
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/code.png"
							mode=""></image>
						<view class="text" style="margin-top: 16rpx;">收款码</view>
					</view>
					<view class="item">
						<view class="message">
							<view class="count" v-if="count">{{count}}</view>
							<image style="width: 50rpx;height: 50rpx" @click="navigate('/page_other/information/index')"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/inform.png"
								mode=""></image>
						</view>
						<view class="text">消息</view>
					</view>
				</view>
			</view>
			<view class="info-block">
				<view class="earnings-block" v-if="state==2" :class="state==2&&member==2?'active' :''">
					<view class="earnings-item" @click="navigate('/page_other/incom/incom?type=1&&title=今日收益')">
						<view class="earnings">￥{{todayCount}}</view>
						<view class="earnings-bottom">今日收益</view>
					</view>
					<view class="earnings-item" @click="navigate('/page_other/incom/incom?type=2&&title=累计收益')">
						<view class="earnings">
							￥{{total_earnings}}
						</view>
						<view class="earnings-bottom">
							累计收益
						</view>
					</view>
					<view class="earnings-item">
						<view class="earnings">
							{{viewCount}}<text style="font-size: 16rpx;">人</text>
						</view>
						<view class="earnings-bottom">商品访客</view>
					</view>
					<view class="earnings-item" @click="navigate('/page_other/incom/incom?type=3&&title=支付订单')">
						<view class="earnings">
							{{orderCount}}<text style="font-size: 16rpx;">单</text>
						</view>
						<view class="earnings-bottom">支付订单</view>
					</view>
				</view>
				<view v-if="member==1" class="member-block" :class="member==1 && state==1?'active':'none'">
					<view class="card" @click="navigate('/page_other/member/member')">
						<view class="member-top">
							<view class="member-left">
								<image mode=""
									src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/member-logo.png">
								</image>
								<view :class="state==1?'active':''" class="member-title">
									会员
								</view>
							</view>

						</view>
						<view class="member-info-block">
							<view class="member-bottom">
								我的邀请人数{{ invite.count || 0 }}/{{ invite.maxCount || 0 }}
							</view>
						</view>
					</view>
					<view class="kefu">
						<view class="member-top" @click="open">
							<view class="member-left">
								<image mode=""
									src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/kefu-icon.png">
								</image>
								<view :class="state==1?'active':''" class="member-title">
									专属客服
								</view>


							</view>

						</view>
						<uni-popup ref="popup" type="bottom" background-color="#fff">
							<view class="popup-content" style="height: 300rpx;">


								<view class="popup-button">
									<button @click="callPhone()"><text class="txt">拨打电话</text></button>
									<button @click="showWechatQrcode()"><text class="txt">添加微信</text></button>
								</view>

							</view>

						</uni-popup>
						<uni-popup ref="wxCodePopup" type="center" :animation="false">
							<view style="background-color: aliceblue; height: 650rpx;" @click.stop>
								<image show-menu-by-longpress="true"
									:src="cloudStorage+user.customerServiceModel.wxCode" mode="widthFix"></image>
								<!-- <view style="text-align: center;">长按识别二维码</view> -->
							</view>
						</uni-popup>
					</view>

				</view>
				<view v-if="member==2" class="car-item" @click="navigate('/page_other/become_member/index')"
					:class="state==2 ?'active' :''">
					<image mode="widthFix"
						src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/20240803182837.jpg"
						class="add"></image>
				</view>
				<view class="gift-block" v-if="member==1">
					<view class="gift" style="margin-right: 20rpx;">
						<view class="gift-top">
							<view class="top-left" @click="navigate('/page_other/gift/index')">
								益联券

							</view>
							<span class="title-nav" @click="navigate('/page_other/code/index')">去转账</span>
							<image class="top-right" @click="getTips('购物消费通用券 ')"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/wh.png">
							</image>
						</view>
						<view class="gift-bottom" @click="navigate('/page_other/gift/index')">
							{{voucher}}
						</view>
					</view>
					<view class="gift">
						<view class="gift-top">
							<view class="top-left" @click="navigate('/page_other/integral_record/index')">
								益积分
							</view>
							<image class="top-right" @click="getTips('消费奖励，可用于二次赋能消费')"
								src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/wh.png">
							</image>
						</view>
						<view class="gift-bottom" @click="navigate('/page_other/integral_record/index')">
							{{integral}}
						</view>
						<span class="title-nav" @click="navigate('/page_other/integral/index')">去兑换</span>
					</view>
				</view>
				<!-- 售券、购券 -->
				<view class="transaction-block">
					<view class="transaction-item" @click="navigate('/page_other/selling_coupons/index')">
					</view>
					<view class="transaction-item" @click="navigate('/page_other/purchase_coupons/index')">
					</view>
				</view>
				<view class="bus-block" @click="jumpEntrepreneurship">
					<image mode="widthFix"
						src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/woyaochuangye.jpg"
						class="add1"></image>
				</view>
				<view class="evaluate-block">
					<view class="evaluate" style="margin-right: 20rpx;">
						<view class="evaluate-title"
							@click.stop="navigate('/page_other/merchant_activity/index?status='+'')">
							商家活动
						</view>
						<view class="evaluate-bottom">
							<view class="bottom-left" @click="navigate('/page_other/merchant_activity/index?status=1')">
								<view class="count" v-if="activeUse">{{activeUse}}</view>
								<image
									src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/edu1.png">
								</image>
								<view class="bottom-left-title">待使用</view>
							</view>
							<view class="bottom-right"
								@click="navigate('/page_other/merchant_activity/index?status=2')">
								<view class="count" v-if="activeEvaluate">{{activeEvaluate}}</view>
								<image
									src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/edu2.png">
								</image>
								<view class="bottom-left-title">待评价</view>
							</view>
						</view>
					</view>
					<view class="evaluate">
						<view class="evaluate-title"
							@click.stop="navigate('/page_other/integral_store/index?status='+'')">
							积分商城
						</view>
						<view class="evaluate-bottom">
							<view class="bottom-left" @click="navigate('/page_other/integral_store/index?status=')">
								<view class="count" v-if="shopDelivery">{{shopDelivery}}</view>
								<image
									src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/edu3.png">
								</image>
								<view class="bottom-left-title">
									全部
								</view>
							</view>
							<view class="bottom-right" @click="navigate('/page_other/integral_store/index?status=2')">
								<view class="count" v-if="shopReceived">{{shopReceived}}</view>
								<image
									src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/edu4.png">
								</image>
								<view class="bottom-left-title">
									待收货
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="count-item">
					<view class="count-list" @click="navigate('/page_other/bus_data/index')">
						<image class="img"
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/bus1.png">
						</image>
						<view class="text">经营数据</view>
					</view>
					<view v-if="state==2" class="count-list" @click="navigate('/page_other/verify/index')">
						<image class="img"
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/bus5.png">
						</image>
						<view class="text">商家核销</view>
					</view>
					<!-- 	<view v-if="state==1" class="count-list" @click="navigate('/page_other/bus_enter/index')">
						<image class="img"
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/bus2.png">
						</image>
						<view class="text">商家入驻</view>
					</view> -->
					<view class="count-list" @click="navigate('/page_other/card/card')">
						<image class="img"
							src="https://suzhou-charge-pile-1306862033.cos.ap-chengdu.myqcloud.com/uniapp/images/card.png">
						</image>
						<view class="text">我的卡券</view>
					</view>
					<view class="count-list" @click="navigate('/page_other/collect/index')">
						<image class="img"
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/bus3.png">
						</image>
						<view class="text">我的收藏</view>
					</view>
					<view class="count-list" @click="navigate('/page_other/address/index')">
						<image class="img"
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/bus4.png">
						</image>
						<view class="text">收货地址</view>
					</view>
					<!-- <view v-if="state==2" class="count-list" @click="navigate('/page_other/monetization/index')">
						<image class="img"
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/bus6.png">
						</image>
						<view class="text">我要变现</view>
					</view> -->
				</view>
		

				<view class="exit-item" @click="navigate('/page_other/monetization/index')" v-if="state==2">
					<view class="left-item">
						<image class="img"
											src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/bus6.png">
										</image>
						<view class="name">我要变现</view>
					</view>
					<view class="iconfont icon-gengduo"></view>
				</view>
				<view class="exit-item" @click="navigate('/page_other/mine/details')" v-if="user.phone">
					<view class="left-item">
						<view class="iconfont icon-gerenziliao" style="color: #FF3B2F;font-size: 34rpx;font-weight: bold;	width: 40rpx;
							height: 40rpx;margin-right: 20rpx;">
						</view>
						<view class="name">修改资料</view>
					</view>
					<view class="iconfont icon-gengduo"></view>
				</view>
				<view class="exit-item" @click="navigate('/page_other/password/password')">
					<view class="left-item">
						<view class="iconfont icon-mima" style="color: #FF3B2F;font-size: 34rpx;font-weight: bold;	width: 40rpx;
							height: 40rpx;margin-right: 20rpx;">
						</view>
						<view class="name">密码设置</view>
					</view>
					<view class="iconfont icon-gengduo"></view>
				</view>
				<view class="exit-item" @click="logout" v-if="user.phone">
					<view class="left-item">
						<image class="img"
							src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/exit.png">
						</image>
						<view class="name">退出登录</view>
					</view>
					<view class="iconfont icon-gengduo"></view>
				</view>
			</view>
		</scroll-view>
		<Tabbar style="position: fixed;left: 0;bottom: 0;"></Tabbar>
	</view>

</template>

<script>
	import {
		getWxLoginCode
	} from '@/util/user.js';
	import {
		weChatLogin,
		savePhoneNumberByCode
	} from '@/api/user.js';
	import CustomNav from '@/components/CustomNav/CustomNav';
	import Tabbar from '@/components/Tabbar/Tabbar';
	import {
		getStorage,
		removeStorage,
		setStorage
	} from '@/util/auth';
	import {
		getUserInfo,
		saveUserInfo
	} from '@/api/home.js';
	import {
		accessToBusinessData,
		get0rderStatusCounts,
		getUserIntegralRecordList,
		getUserVoucherRecordList,
		inviteUserMonthCount,
		getMessagesCount
	} from '@/api/mine.js'
	import {
		uploadFile
	} from '@/api/file.js';

	export default {
		components: {
			CustomNav,
			Tabbar
		},
		data() {
			return {
				voucher: 0,
				integral: 0,
				orderCount: 0,
				todayCount: 0,
				total_earnings: 0,
				viewCount: 0,
				invite: {
					count: 0,
					maxCount: 0,
				},
				showQrcode: false,
				member: 2,
				state: 1,
				code: '',
				user: {},
				activeUse: 0,
				activeEvaluate: 0,
				shopDelivery: 0,
				shopReceived: 0,
				count: 0,
				showPopup: false, // 控制弹出框显示隐藏
				popupStyle: {
					height: '200rpx' // 设置弹出框高度
				}
			}
		},
		methods: {

			popupMaskClick() {
				// this.$refs.popup.close()
				// this.$refs.wxCodePopup.close()
			},
			open() {
				this.$refs.popup.open()
			},
			showWechatQrcode() {
				this.showQrcode = true
				this.$refs.popup.close()
				this.$refs.wxCodePopup.open()

			},
			jumpEntrepreneurship() {
				// navigate('/page_other/start_bus/indexCategory')
				this.showToast('预备中,敬请期待');
				return;

			},
			isClickWxCodePopup() {

				this.$refs.popup.close()
			},
			queryMessageCount() {
				getMessagesCount().then((res) => {
					this.count = res
				})
			},
			getPhoneNumber(e) {


				if (!e.detail.code) {
					this.showToast('您取消了授权');
					return;
				}
				const mobileCode = e.detail.code;
				wx.login({
					success: (login) => {
						uni.showLoading({
							title: '登录中',
							mask: true
						})
						const code = login.code;
						savePhoneNumberByCode({
							mobileCode: mobileCode,
							code: code,
							inviteCode: this.inviteCode
						}).then((res) => {
							if (res.message) {
								this.showToast(res.message);
							} else {
								//this.$store.dispatch('user/getUser')
								setStorage('token', res.token, 259200);
								setStorage('user', res.user, 259200);
								this.showToast('登录成功', () => {



									uni.redirectTo({
										url: '/pages/index/index'
									});
								}, 1000);
								this.getUser();
							}
						});
					}
				});
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: this.user.customerServiceModel.phone,
					success() {
						console.log('拨打成功了');
					},
					fail() {
						console.log('拨打失败了');
					}
				})
				this.showPopup = false; // 点击后隐藏弹出框
			},
			navigateToMiniProgramService() {
				this.showPopup = false; // 点击后隐藏弹出框
			},
			truncateName(name) {
				if (name.length > 5) {
					return name.substring(0, 5) + '...';
				} else {
					return name;
				}
			},
			getTips(content) {
				uni.showModal({
					title: '提示',
					content: content,
					showCancel: false,
					confirmText: '我已知晓',
					confirmColor: '#FF3B2F'
				});
			},
			copyMessage(value) {
				uni.setClipboardData({
					data: value,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: "复制成功"
								});
							},
						});
					},
				});
			},
			scrollChange(e) {
				uni.$emit('scrollChange', e)
			},
			changeAvatar(e) {
				uploadFile(e.detail.avatarUrl).then((res) => {
					uni.showLoading({
						title: '保存中',
						mask: true
					});
					saveUserInfo({
						faceUrl: res.url
					}).then(() => {
						this.showToast('保存成功');
						this.getUser();
					});
				});
			},
			//获取用户信息
			getUser() {
				return getUserInfo().then((res) => {
					this.user = res
					this.member = res.vip
					this.state = res.status
					this.code = res.invitationCode
					let oldUser = getStorage('user');
					oldUser.vip = res.vip
					oldUser.faceUrl = res.faceUrl
					setStorage('user', oldUser)
				})
			},
			//本月我的邀请人数
			getInviteUserMonthCount() {
				return inviteUserMonthCount().then((res) => {
					this.invite = res
				})
			},
			get0rderCounts() {
				return get0rderStatusCounts().then((res) => {
					this.activeUse = res.toBeUsed
					this.activeEvaluate = res.toBeEvaluated
					this.shopDelivery = res.toBeShipped
					this.shopReceived = res.toBeReceived
				})
			},
			getToBusinessData() {
				return accessToBusinessData().then((res) => {
					this.orderCount = res.orderCount;
					this.total_earnings = res.total_earnings;
					this.viewCount = res.viewCount;
					this.todayCount = res.todayCount
				})
			},
			logout() {
				uni.showModal({
					title: '提示',
					content: `确定要退出重新登录吗？`,
					confirmColor: '#FF2F34',
					success: (res) => {
						if (res.confirm) {
							// logoutApi().then(() => {
							removeStorage('token');
							removeStorage('user');
							removeStorage('scene');
							uni.navigateTo({
								url: '/pages/index/index'
							})
							// })
						}
					}
				})
			},
			//代金卷
			getVoucher() {
				return getUserVoucherRecordList({
					page: 1,
					limit: 10,
				}).then(res => {
					this.voucher = res.voucher
				})
			},
			getIntegral() {
				return getUserIntegralRecordList({
					page: 1,
					limit: 10,
				}).then(res => {
					this.integral = res.integral
				})
			}
		},
		onLoad() {
			if (getStorage('scene')) {
				this.inviteCode = getStorage('scene');
			}
		},
		onShow() {
			this.info = getStorage('user')
			if (getStorage('token')) {
				uni.showCustomLoading();
				Promise.all([this.getInviteUserMonthCount(), this.getVoucher(), this.getIntegral(), this
					.getToBusinessData(), this.get0rderCounts(), this.queryMessageCount(), this.getUser()
				]).finally(() => {
					uni.hideCustomLoading()
				})
			}
			uni.hideCustomLoading()
		},
	}
</script>

<style lang="scss" scoped>
	.mine-page {
		overflow: hidden;

		.btn-login {
			border: none;
			background: transparent;
		}

		.btn-login::after {
			border: none;
		}

		.content {
			width: 100%;
			height: calc(100vh - 160rpx);
			overflow-y: auto;
			position: relative;

			.transaction-block {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.transaction-item {
					width: calc(50% - 12rpx);
					height: 220rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					padding: 30rpx;
					color: #fff;

					.transaction-name {
						margin-bottom: 20rpx;
					}

					.transaction-text {
						font-size: 22rpx;
					}
				}

				.transaction-item:first-child {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/20240914105749.png') no-repeat center;
					background-size: 100%;
				}

				.transaction-item:last-child {
					background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/20240914105800.png') no-repeat center;
					background-size: 100%;
				}
			}

			.top-block.active {
				height: 540rpx;
				padding-top: 75rpx;
			}

			.user-item.active {
				height: 85%;
			}

			.right-item.active {
				height: 85%;
			}

			.top-block {
				height: 550rpx;
				width: 100%;
				// background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/mine-bg.png') no-repeat center;
				background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/20240803182846.jpg') no-repeat center center;
				background-size: cover;
				display: flex;
				//align-items: center;
				justify-content: space-between;
				padding-left: 30rpx;
				padding-right: 30rpx;

				.user-item {
					display: flex;
					align-items: center;
					color: #fff;

					.user-photo {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
					}

					.user-photo-block {
						width: 140rpx;
						height: 140rpx;
						border-radius: 50%;
						overflow: hidden;

						.upload-photo-btn {
							width: 100%;
							height: 100%;
							position: relative;
							padding: 0;

							.tips {
								font-size: 20rpx;
								width: 100%;
								position: absolute;
								bottom: 0;
								left: 0;
								color: #fff;
								display: flex;
								justify-content: center;
								align-items: center;
								background: rgba(0, 0, 0, 0.5);
								z-index: 1;
								height: 48rpx;
							}
						}

						.user-photo {
							width: 100%;
							height: 100%;
						}

						.user-photo.ps {
							position: absolute;
							left: 0;
							top: 0;

						}
					}

					.user-name {
						font-size: 32rpx;
						font-weight: bold;
						background: none;
						margin: 0;
						border-radius: 0;
						line-height: normal;
						padding: 0;
						color: #fff;
						margin-left: 20rpx;

						&::after {
							border: none;
						}
					}

					.avater {
						width: 160rpx;
						height: 160rpx;
						border-radius: 50%;
					}

					.phone {
						font-size: 32rpx;
						margin-left: 20rpx;
					}

					.yard {
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 20rpx;

						.yard-left {
							padding: 6rpx 12rpx;
							color: #FFFFFF;
							font-size: 24rpx;
							background: rgb(255, 107, 84);
							border-radius: 50px 0px 0px 50px;
						}

						.yard-rght {
							padding: 6rpx 12rpx;
							border-radius: 0px 50px 50px 0px;
							background: #FECEAB;
							display: flex;
							justify-content: center;
							align-items: center;

							.copy {
								color: #FF2F34;
								font-size: 24rpx;
								margin-right: 8rpx;
							}

							image {
								width: 22rpx;
								height: 22rpx;
							}
						}
					}
				}

				.right-item {
					display: flex;
					align-items: center;
					color: #fff;

					.item {
						display: flex;
						flex-direction: column;
						align-items: center;

						.text {
							font-size: 24rpx;
						}
					}

					.message {
						position: relative;
						margin-top: 5rpx;

						.count {
							position: absolute;
							width: 32rpx;
							/* 修改为合适的值 */
							height: 32rpx;
							/* 修改为合适的值 */
							border-radius: 50%;
							/* 添加圆角属性，确保是圆形 */
							color: #ffffff;
							border: 1px solid #ff5025;
							background-color: #ff5025;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 20rpx;
							line-height: 20rpx;
							margin-top: -16rpx;
						}
					}

					.iconfont {
						font-size: 40rpx;
						margin-left: 20rpx;
					}
				}
			}

			.info-block {
				//background: linear-gradient(to bottom, #E6F0FE, #F7F6F9);
				border-radius: 40rpx 40rpx 0 0;
				padding: 40rpx 30rpx;
				min-height: 60vh;

				.earnings-block.active {
					margin-top: -200rpx;
				}

				.earnings-block {
					width: 100%;
					display: flex;
					margin-top: -250rpx;
					color: #FFFFFF;
					width: 100%;
					margin-bottom: 20rpx;

					.earnings-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						font-size: 28rpx;
						width: calc((100% - 30rpx) / 4);
						margin-right: 10rpx;
					}

					.earnings-item:nth-child(4) {
						margin-right: 0;
					}
				}

				.car-item.active {
					margin-top: 40rpx;
				}

				.car-item {
					width: 100%;
					margin-top: -125rpx;

					.add {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

				.member-block.active {
					margin-top: -140rpx;
				}

				.member-block {
					width: 100%;
					height: 200rpx;
					display: flex;
					// flex-wrap: wrap; // Add this line to allow flex items to wrap to the next line
					justify-content: space-between;
					margin-bottom: 20rpx;

					.card {
						width: calc((100% - 20rpx)/2);
						background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/member-bg.png') no-repeat;
						background-size: 100% 180rpx;
						padding: 30rpx;
						border-radius: 10rpx;
					}

					.kefu {
						width: calc((100% - 20rpx)/2);
						background: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/kefu-back.png') no-repeat;
						background-size: 100% 180rpx;
						padding: 30rpx;
						border-radius: 10rpx;

						.popup-content {
							text-align: center;
							padding: 30rpx 0;

							.popup-button {

								display: flex;
								justify-content: space-around;
								margin-bottom: 20rpx;



								.txt {
									font-size: 32rpx;
									color: #ffffff;
								}
							}

							.popup-button button {
								flex: 1;
								background: linear-gradient(to right, #FF2F34, #FF6B18);
								color: #fff;
								border-radius: 50rpx;
								padding: 16rpx 0;
								font-size: 32rpx;
								margin: 0 20rpx;
							}

							.popup-button:first {}
						}

					}

					.member-top {
						display: flex;
						justify-content: space-between;

						.button-contact {
							margin: 0;
							padding: 0;
							border: none;
							background: none;
							font: inherit;
							color: inherit;
							outline: none;
						}

						.button-contact::after {
							border: none;
						}

						.member-left {
							display: flex;

							image {
								width: 50rpx;
								height: 50rpx;
								margin-right: 20rpx;
							}

							.member-title {
								font-size: 32rpx;
								color: #69481B;
							}
						}

						.member-right {
							font-size: 28 rpx;
							color: #69481B;
						}
					}

					.member-info-block {
						margin-top: 10rpx;
						display: flex;
						justify-content: space-between;
						/* 将元素分别靠左和靠右 */
						flex-direction: row;

						.member-bottom {
							font-size: 28 rpx;
							color: #69481B;
							margin-top: 20 rpx;
							line-height: 60 rpx;
						}

						.customer-bottom {
							float: right;
							font-size: 28 rpx;
							color: #69481B;
							margin-top: 20 rpx;
							line-height: 60 rpx;

							.customer-name {
								text-decoration: underline;
							}
						}
					}

				}

				.gift-block {
					width: 100%;
					height: 180rpx;
					display: flex;
					margin-top: 12rpx;

					.gift {
						width: calc((100% - 20rpx)/2);
						background-image: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/mine.png');

						background-size: 100%;
						border-radius: 20rpx;
						padding: 40rpx 40rpx;
						position: relative;

						.gift-top {
							display: flex;
							justify-content: space-between;

							.top-left {
								color: #FFFFFF;
								font-size: 32rpx;
							}

							.top-right {
								width: 30rpx;
								height: 30rpx;
							}

						}

						.gift-bottom {
							margin-top: 20rpx;
							font-size: 40rpx;
							color: #FFFFFF;
						}

						.title-nav {
							position: absolute;
							right: 5%;
							margin-right: 10rpx;
							color: #fff;
							bottom: 25rpx;
							text-decoration: underline;
						}
					}
				}

				.bus-block {
					width: 100%;
					margin-top: 20rpx;

					.add1 {
						width: 100%;
						height: 100%;
						border-radius: 20rpx;
					}
				}

				.evaluate-block {
					display: flex;
					width: 100%;
					margin-top: 12rpx;

					.evaluate {
						width: calc((100% - 20rpx)/2);
						background: #FFFFFF;
						border-radius: 20rpx;
						padding: 26rpx 52rpx;

						.evaluate-title {
							color: #1A1A1A;
							font-size: 32rpx;
							font-weight: normal;
						}

						.evaluate-bottom {
							display: flex;
							justify-content: space-between;
							margin-top: 40rpx;

							.bottom-left {
								display: flex;
								flex-direction: column;
								align-items: center;
							}

							.count {
								position: absolute;
								width: 32rpx;
								/* 修改为合适的值 */
								height: 32rpx;
								/* 修改为合适的值 */
								border-radius: 50%;
								/* 添加圆角属性，确保是圆形 */
								margin-left: 70rpx;
								color: #ffffff;
								border: 1px solid #ff5025;
								background-color: #ff5025;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 20rpx;
								line-height: 20rpx;
								margin-top: -16rpx;
							}

							.bottom-right {
								display: flex;
								flex-direction: column;
								align-items: center;
							}

							image {
								width: 48rpx;
								height: 48rpx;
							}
						}
					}
				}


				.count-item {
					display: flex;
					align-items: center;
					background-color: #fff;
					justify-content: space-between;
					padding: 30rpx;
					border-radius: 30rpx;
					margin-top: 20rpx;

					.count-list {
						display: flex;
						flex-direction: column;
						align-items: center;

						.count {
							margin-bottom: 20rpx;
							font-size: 40rpx;
						}

						.text {
							font-size: 26rpx;
						}

						.img {
							width: 46rpx;
							height: 46rpx;
							margin-bottom: 20rpx;
						}
					}
				}

				.exit-item {
					display: flex;
					align-items: center;
					background-color: #fff;
					justify-content: space-between;
					padding: 40rpx 30rpx;
					border-radius: 30rpx;
					margin-top: 16rpx;

					.left-item {
						display: flex;
						align-items: center;

						.img {
							width: 40rpx;
							height: 40rpx;
							margin-right: 20rpx;
						}
					}

					.iconfont {
						color: #B2B2B2;
					}
				}
			}
		}
	}
</style>